<template>
<div id="app">

     <el-table :data="list" style="width: 100%">
        <el-table-column prop="btitle" label="博客标题" width="180" />
        <el-table-column prop="user" label="发布人" width="180" >
          <template v-slot="scope">
            <el-tag>{{ scope.row.user.truename }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="btype" label="博客类型" >
          <template v-slot="scope">
            <el-tag>{{ scope.row.btype.typename }}</el-tag>
          </template>
        </el-table-column>
     </el-table>

     <el-pagination
      :current-page="canshu.pageNum"
      :page-size="canshu.pageSize"
      :page-sizes="[1, 2, 3, 4]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script setup>
//从vuerf引入ref
import {onMounted, ref} from 'vue'
import axios from 'axios'
import {selectsuoyou} from '../api/axios'

//定义总条数
const total = ref(0)

//分页参数
const canshu=ref({
    pageNum:1,
    pageSize:2
})

const handleSizeChange = (val) => {
  canshu.value.pageSize=val;  //把选中的每页显示条数赋值给canshu.pageSize
  init();  //重新调用init方法
}
const handleCurrentChange = (val) => {
  canshu.value.pageNum=val; //把点击的页码赋值给canshu.pageNum
  init();  //重新调用init方法
}

//定义数据
const list=ref([])
const init=async()=>{
    //返回响应结果
    const res=await selectsuoyou(canshu.value);
    console.log(res.data)
    list.value=res.data.list;
    total.value=res.data.total;
}


//定义生命周期
//当页面加载完成时，执行onMounted
onMounted(()=>{
   init();
})

</script>


<style scoped>

</style>